<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8" >
    <meta name="baidu-site-verification" content="iJemnNsV3M" />
    
    <title>Vue入门教程（三） | lupin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >
    <meta name="keywords" content="全栈" >
    <meta name="description" content="全栈" >

    
    <link rel="shortcut icon" href="/img/favicon.png" >
    
    
<link rel="stylesheet" href="/css/style.css">

    <!--[if lt IE 9]>
    
<script src="/js/html5.js"></script>

    <![endif]-->
    
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d5ebf515ab530cfbdda5f5c85093fb41";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


<meta name="generator" content="Hexo 4.2.0"></head>

<body class="home">
    <!--[if lt IE 9]>
    <div class="browsehappy">
        当前网页 <strong>不支持</strong>
        你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/" target="_blank" rel="noopener">升级你的浏览器</a>.
    </div>
    <![endif]-->

    <!-- 博客头部 -->
    <header class="header">
    <section class="container header-main">
        <div class="logo">
            <a href="/">
                <div class="cover">
                    <span class="name">lupin</span>
                    <span class="description">博客</span>
                </div>
            </a>
        </div>
        <div class="dropnav icon-paragraph-justify" id="ALLVAR__btnDropNav"></div>
        <ul class="menu hidden" id="ALLVAR__menu">
            
            <li rel="/2020/05/28/Vue/03.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%B8%89%EF%BC%89/index.html" class="item ">
                <a href="/" title="首页" class="icon-home">&nbsp;首页</a>
            </li>
            
            <li rel="/2020/05/28/Vue/03.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%B8%89%EF%BC%89/index.html" class="item ">
                <a href="/lab/" title="实验室" class="icon-lab">&nbsp;实验室</a>
            </li>
            
            <li rel="/2020/05/28/Vue/03.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%B8%89%EF%BC%89/index.html" class="item ">
                <a href="/about/" title="关于" class="icon-about">&nbsp;关于</a>
            </li>
            
        </ul>
        <div class="profile clearfix">
            <div class="feeds fl">
                
                
                <p class="links">
                    
                        <a href="https://gitee.com/Shr9527" target="_blank">码云</a>
                        |
                    
                        <a href="https://gitee.com" target="_blank">Hosted by Gitee Pages</a>
                        
                    
                </p>
                <p class="sns">
                    
                    <a href="javascript: void(0);" class="wechat">
                        <b>■</b>
                        公众号
                        <span class="popover">
                            <img src="/img/wechat_mp.jpg" width="120" height="120" alt="我的微信订阅号">
                            <i class="arrow"></i>
                        </span>
                    </a>
                </p>
                
            </div>
            <div class="avatar fr">
                <img src="/img/favicon.png" alt="avatar" title="AllVar" >
            </div>
        </div>
    </section>
</header>


    <!-- 博客正文 -->
    <div class="container body clearfix">
        <section class="content">
            <div class="content-main widget">
                <!-- 文章页 -->
<!-- 文章 -->
<article class="post article">
    <header class="text-center">
        <h3 class="post-title"><span>Vue入门教程（三）</span></h3>
    </header>
    <p class="post-meta text-center">
         发表于
        <time datetime="2020-05-28T13:53:25.000Z">2020-05-28</time>
    </p>
    <div class="post-content">
        <h3 id="使用webpack手动搭建项目框架"><a href="#使用webpack手动搭建项目框架" class="headerlink" title="使用webpack手动搭建项目框架"></a>使用webpack手动搭建项目框架</h3><h4 id="初始化package-json"><a href="#初始化package-json" class="headerlink" title="初始化package.json"></a>初始化package.json</h4><a id="more"></a>

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"># 初始化模块描述文件</span><br><span class="line">    npm init -y</span><br><span class="line"></span><br><span class="line">    &#123;</span><br><span class="line">        &quot;name&quot;: &quot;&quot;,</span><br><span class="line">        &quot;version&quot;: &quot;1.0.0&quot;,</span><br><span class="line">        &quot;main&quot;: &quot;index.js&quot;,</span><br><span class="line">        &quot;scripts&quot;: &#123;</span><br><span class="line">            &quot;test&quot;: &quot;echo \&quot;Error: no test specified\&quot; &amp;&amp; exit 1&quot;</span><br><span class="line">        &#125;,</span><br><span class="line">        &quot;keywords&quot;: [],</span><br><span class="line">        &quot;author&quot;: &quot;&quot;,</span><br><span class="line">        &quot;license&quot;: &quot;ISC&quot;,</span><br><span class="line">        &quot;description&quot;: &quot;&quot;,</span><br><span class="line">        &quot;repository&quot;: &#123;</span><br><span class="line">            &quot;type&quot;: &quot;git&quot; &#x2F; &quot;svn&quot;,</span><br><span class="line">            &quot;url&quot;: &quot;&quot;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"># package.json 常用属性说明</span><br><span class="line">    name - 包名</span><br><span class="line">    version - 包的版本号</span><br><span class="line">    main - main 字段指定了程序的主入口文件。这个字段的默认值是模块根目录下面的 index.js。</span><br><span class="line">    scripts - 可以执行的命令&#x2F;脚本</span><br><span class="line">    keywords - 关键字</span><br><span class="line">    author - 包的作者 （遵循“账户名&lt;邮件&gt;”的规则，例如：zhangsan &lt;zhangsan@163.com&gt;）</span><br><span class="line">    license - 遵从协议</span><br><span class="line">    description - 包的描述</span><br><span class="line">    repository - 包代码的Repo信息，包括type和URL，type可以是git或svn，URL则是包的Repo地址。</span><br><span class="line">    dependencies &#x2F; devDependencies - 生产&#x2F;开发环境依赖包列表。它们将会被安装在 node_module 目录下。</span><br></pre></td></tr></table></figure>

<h4 id="目录结构"><a href="#目录结构" class="headerlink" title="目录结构"></a>目录结构</h4><p> <a href="demo.zip">点击下载源码文件(大小：15kb)</a></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">- config                        &#x2F;&#x2F; webpack配置文件</span><br><span class="line">    |- webpack.analyzer.js          &#x2F;&#x2F; 用于存放有关分析打包情况的配置文件</span><br><span class="line">    |- webpack.common.js            &#x2F;&#x2F; 用于存放公共配置的文件</span><br><span class="line">    |- webpack.dev.js               &#x2F;&#x2F; 用于存放开发配置的文件</span><br><span class="line">    |- webpack.prod.js</span><br><span class="line">- dist                          &#x2F;&#x2F; 打包后文件夹</span><br><span class="line">- public                        &#x2F;&#x2F; 公共文件夹</span><br><span class="line">    |- index.html                   &#x2F;&#x2F; 默认入口页面</span><br><span class="line">- src                           &#x2F;&#x2F; 页面源码文件夹</span><br><span class="line">    |- assets                       &#x2F;&#x2F; 资产文件夹</span><br><span class="line">    |- components                   &#x2F;&#x2F; 贡藕给你组件文件夹</span><br><span class="line">    |- router                       &#x2F;&#x2F; 路由文件夹</span><br><span class="line">        |- router.js                    &#x2F;&#x2F; 用于存放路由配置的文件</span><br><span class="line">        |- routes.js                    &#x2F;&#x2F; 用于存放路由信息的文件</span><br><span class="line">    |- store                        &#x2F;&#x2F; vuex文件夹</span><br><span class="line">        |- modules                  &#x2F;&#x2F; 模块文件夹</span><br><span class="line">            |- modulesA.js              &#x2F;&#x2F; 用于存放模块化的store的文件</span><br><span class="line">            |- modulesB.js              &#x2F;&#x2F; 用于存放模块化的store的文件</span><br><span class="line">        |- actions.js               &#x2F;&#x2F; 用于存放异步请求api或提交state的文件</span><br><span class="line">        |- getters.js               &#x2F;&#x2F; 用于存放模块化的集合文件</span><br><span class="line">        |- modules.js               &#x2F;&#x2F; 用于存放同步更新state方法的文件</span><br><span class="line">        |- mutations.js             &#x2F;&#x2F; 用于存放不同的store状态的文件（可自行实现扩展）</span><br><span class="line">        |- state.js                 &#x2F;&#x2F; 用于存放store相关配置的文件</span><br><span class="line">        |- store.js                 &#x2F;&#x2F; 用于存放工具类的文件（可自行实现扩展）</span><br><span class="line">    |- utils                        &#x2F;&#x2F; 工具文件夹</span><br><span class="line">        |- util.js</span><br><span class="line">    |- views                        &#x2F;&#x2F; 页面源码文件夹</span><br><span class="line">        |- login                        &#x2F;&#x2F; 页面文件夹</span><br><span class="line">            |- Login.vue                    &#x2F;&#x2F; 页面源码文件</span><br><span class="line">    |- App.vue                      &#x2F;&#x2F; 入口文件</span><br><span class="line">    |- main.js                      &#x2F;&#x2F; 入口js脚本</span><br><span class="line">- .babelrc                      &#x2F;&#x2F; babel配置文件夹</span><br><span class="line">- favicon.ico                   &#x2F;&#x2F; 网站图标</span><br><span class="line">- package.json                  &#x2F;&#x2F; 模块描述文件</span><br></pre></td></tr></table></figure>

<h4 id="全局安装webpack以及webpack-cli"><a href="#全局安装webpack以及webpack-cli" class="headerlink" title="全局安装webpack以及webpack-cli"></a>全局安装webpack以及webpack-cli</h4><!-- more -->

<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g webpack webpack-cli</span><br></pre></td></tr></table></figure>

<h4 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># 生产依赖</span><br><span class="line">    npm install -S vue vuex vue-router axios qs</span><br><span class="line"></span><br><span class="line"># 开发依赖</span><br><span class="line">    npm install -D cross-env webpack webpack-cli webpack-merge webpack-dev-server webpack-bundle-analyzer  html-webpack-plugin copy-webpack-plugin clean-webpack-plugin terser-webpack-plugin compression-webpack-plugin friendly-errors-webpack-plugin @babel&#x2F;core @babel&#x2F;plugin-transform-runtime @babel&#x2F;preset-env @babel&#x2F;runtime babel-loader babel-polyfill vue-template-compiler vue-loader less less-loader css-loader style-loader url-loader file-loader element-ui</span><br></pre></td></tr></table></figure>

<h4 id="package-json-scripts-脚本"><a href="#package-json-scripts-脚本" class="headerlink" title="package.json scripts 脚本"></a>package.json scripts 脚本</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"># 构建开发脚本</span><br><span class="line">    &quot;dev&quot;: &quot;cross-env NODE_ENV&#x3D;development webpack-dev-server --open --hot --config config&#x2F;webpack.dev.js&quot;,</span><br><span class="line"></span><br><span class="line"># 构建生产脚本</span><br><span class="line">    &quot;build&quot;: &quot;cross-env NODE_ENV&#x3D;production webpack --progress --config config&#x2F;webpack.prod.js&quot;,</span><br><span class="line"></span><br><span class="line"># 分析打包状况</span><br><span class="line">    &quot;analyzer&quot;: &quot;cross-env NODE_ENV&#x3D;production npm_config_report&#x3D;true webpack --progress --config config&#x2F;webpack.analyzer.js&quot;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>依赖附录</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"># cross-env 运行跨平台设置和使用环境变量的脚本</span><br><span class="line"></span><br><span class="line"># webpack webpack-cli 用于打包js文件</span><br><span class="line"></span><br><span class="line"># webpack-merge 用于复用webpack公共配置文件</span><br><span class="line"></span><br><span class="line"># webpack-dev-server 小型的Node.js Express服务器</span><br><span class="line"></span><br><span class="line"># webpack-bundle-analyzer 用于分析项目的打包情况</span><br><span class="line"></span><br><span class="line"># html-webpack-plugin 用于将分包好的js注入index.html中</span><br><span class="line"></span><br><span class="line"># copy-webpack-plugin 用于拷贝文件或文件夹</span><br><span class="line"></span><br><span class="line"># clean-webpack-plugin 用于发布前清除上一次发布的代码</span><br><span class="line"></span><br><span class="line"># terser-webpack-plugin 用于压缩js文件</span><br><span class="line"></span><br><span class="line"># friendly-errors-webpack-plugin 用于优化日志显示</span><br><span class="line"></span><br><span class="line"># compression-webpack-plugin 用于对打包后的js文件进行gzip压缩，以减少网络传输压力</span><br><span class="line"></span><br><span class="line"># babel全家桶 用于js不兼容语法转为兼容语法（es6&#x3D;&gt;es5）</span><br><span class="line">@babel&#x2F;core @babel&#x2F;plugin-transform-runtime @babel&#x2F;preset-env @babel&#x2F;runtime babel-loader babel-polyfill</span><br><span class="line"></span><br><span class="line"># vue全家桶 (要保证vue版本号和vue-template-compiler版本号保持一致)</span><br><span class="line">vue vuex vue-loader vue-router vue-template-compiler</span><br><span class="line"></span><br><span class="line"># less less-loader 用于css预处理</span><br><span class="line"></span><br><span class="line"># css-loader 用于处理引入的css模块</span><br><span class="line"></span><br><span class="line"># style-loader 用于处理require引入css</span><br><span class="line"></span><br><span class="line"># url-loader file-loader 用于处理图片、字体等静态资源</span><br><span class="line"></span><br><span class="line"># axios 基于 promise的 HTTP库</span><br><span class="line"></span><br><span class="line"># qa axios以表单形式提交数据时，需要进行序列化</span><br><span class="line"></span><br><span class="line"># element-ui UI框架</span><br></pre></td></tr></table></figure>
    </div>
    <p class="post-meta">
        <span class="post-cat">分类：
            <a class="cat-link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        </span>
        <span class="post-tags">
            标签：
            
    
        <a href="/tags/vue/" title="vue">vue</a> / 
    
        <a href="/tags/javascript/" title="javascript">javascript</a>
    

        </span>
    </p>
</article>
<!-- 分享按钮 -->

  <div class="article-share clearfix text-center">
    <div class="share-area">
      <span class="share-txt">分享到：</span>
      <a href="javascript: window.open('http://service.weibo.com/share/share.php?url=' + encodeURIComponent(location.href) + '&title=' + document.title + '&language=zh_cn');" class="share-icon weibo"></a>
      <a href="javascript: alert('请复制链接到微信并发送');" class="share-icon wechat"></a>
      <a href="javascript: window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(location.href) + '&title=' + document.title);" class="share-icon qqzone"></a>
      <a href="javascript: window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(location.href) + '&desc=AllVar个人博客&title=' + document.title + '&callback=' + encodeURIComponent(location.href));" class="share-icon qq"></a>
      <a href="javascript: window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent(location.href) + '&name=' + document.title + '&text=' + document.title);" class="share-icon douban"></a>
    </div>
  </div>


<!-- 上一篇/下一篇 -->

<div class="article-nav clearfix">
    
    <span class="prev fl">
        上一篇<br >
        <a href="javascript: void(0);">没有上一篇了</a>
    </span>
    

    
    <span class="next fr">
        下一篇<br >
        <a href="/2020/05/28/Vue/02.Vue%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B%EF%BC%88%E4%BA%8C%EF%BC%89/">
            
                Vue入门教程（二）
            
        </a>
    </span>
    
</div>

<!-- 文章评论 -->


            </div>

        </section>
        <!-- 侧栏部分 -->
<aside class="sidebar">
    
    <section class="widget">
        <h3 class="widget-hd"><strong>文章搜索</strong></h3>
        <div class="search-form">
  <form
    id="searchForm"
    method="GET"
    action="https://www.baidu.com/s"
    ectype="application/x-www-form-urlencoded"
    target="_blank"
    autocomplete="false"
    onsubmit="javascript: return false;">
    <input
      id="searchKeyword"
      type="text"
      class="form-control"
      placeholder="输入关键字搜索"
      autocomplete="false"
    />
    <input id="searchKeywordHidden" type="hidden" name="wd" />
    <input id="searchButton" class="btn" type="submit" value="搜索" />
  </form>
</div>
    </section>
    

    <section class="widget">
        <h3 class="widget-hd"><strong>文章分类</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
    <li>
        <a href="/categories/%E5%90%8E%E7%AB%AF/">后端</a>
        <span class="badge">(20)</span>
    </li>
    
    <li>
        <a href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
        <span class="badge">(3)</span>
    </li>
    
    <li>
        <a href="/categories/%E5%B7%A5%E5%85%B7/">工具</a>
        <span class="badge">(2)</span>
    </li>
    
</ul>
    </section>

    
    <section class="widget">
        <h3 class="widget-hd"><strong>热门标签</strong></h3>
        <!-- 文章标签 -->
<div class="widget-bd tag-wrap">
  
    <a class="tag-item" href="/tags/centeros/" title="centeros">centeros (4)</a>
  
    <a class="tag-item" href="/tags/python/" title="python">python (1)</a>
  
    <a class="tag-item" href="/tags/docker/" title="docker">docker (6)</a>
  
    <a class="tag-item" href="/tags/cpp/" title="cpp">cpp (8)</a>
  
    <a class="tag-item" href="/tags/dotnet-core/" title="dotnet core">dotnet core (1)</a>
  
    <a class="tag-item" href="/tags/nginx/" title="nginx">nginx (1)</a>
  
    <a class="tag-item" href="/tags/redis/" title="redis">redis (2)</a>
  
    <a class="tag-item" href="/tags/unity/" title="unity">unity (3)</a>
  
    <a class="tag-item" href="/tags/c/" title="c#">c# (3)</a>
  
    <a class="tag-item" href="/tags/vue/" title="vue">vue (3)</a>
  
    <a class="tag-item" href="/tags/javascript/" title="javascript">javascript (3)</a>
  
    <a class="tag-item" href="/tags/visual-studio/" title="visual studio">visual studio (1)</a>
  
    <a class="tag-item" href="/tags/tool/" title="tool">tool (2)</a>
  
    <a class="tag-item" href="/tags/vscode/" title="vscode">vscode (1)</a>
  
</div>
    </section>
    

    
    <!-- 友情链接 -->
    <section class="widget">
        <h3 class="widget-hd"><strong>友情链接</strong></h3>
        <!-- 文章分类 -->
<ul class="widget-bd">
    
        <li>
            <a href="https://gitee.com/Shr9527" target="_blank" title="码云博客">码云博客</a>
        </li>
    
</ul>
    </section>
    
</aside>
<!-- / 侧栏部分 -->
    </div>

    <!-- 博客底部 -->
    <footer class="footer">
    &copy;
    
        2016-2020
    

    <a href="/">AllVar Loves You</a>
</footer>
<div class="back-to-top" id="ALLVAR__backToTop" title="返回顶部">返回顶部</div>

    <!--博客js脚本 -->
    <!-- 这里放网站js脚本 -->

<script src="/js/main.js?v=1590833788379.js"></script>

</body>
</html>